<template>
  <mt-loadmore class="" :top-method="refresh" :bottom-method="loadMore" ref="loadLayer">
    <section id="storeList">

      <banner   class="banner-fixed" :imgList="imgList" :ratio="3.60"/>

      <div class=""  v-touch:tap="getLocation">
          <location  :message="locationMessage" :isLoading="isLoadingLocation" class="mt15"/>
      </div>

      <div class="store-content">
        <ul class="store-list">
          <li v-for="store in storeList" :key="store.storeId">
            <a href="javascript:void(0);" v-touch:tap="(e)=>{forwardDetail(e,store)}" >
              <h5 class="mb15 text-primary store-title text-ellipsis">{{store.storeName}}</h5>
              <div class="bg-img-clip store-img"
                   :style="{width : '100%', height : `${storeImgStyle.h}px`,backgroundImage:`url(${store.coverPic})`}"></div>
              <p class="mt15 store-desc text-color-light">
                {{store.intro}}
              </p>
            </a>
          </li>
        </ul>
      </div>
      <p class="text-color-light text-center">－ 更多CVS敬请期待 －</p>

    </section>
  </mt-loadmore>
</template>
<style lang="scss" scoped>
  .banner-fixed {

  }

  .store-content {
    /*padding-top: 114px;*/
    /*height: 200px;*/
  }

  .store-list {
    margin-bottom: 15px;
    & > li {
      background: #fff;
      margin-top: 15px;
      a {
        display: block;
        border-bottom: 1px solid #D8D8D8;
        border-top: 1px solid #D8D8D8;
        padding: 15px;
      }
    }
  }

  .store-title {
    font-size: 16px;
  }

  .store-desc {
    font-size: 14px;
  }

  .store-img {
    border-radius: 4px;
  }
</style>
<script>

    import Banner from "../../../common/component/Banner";
    import Location from "./Location";
    import Util from "util";
    import API  from "api";
   import { Loadmore } from 'mint-ui';
   import wx from "weixin-js-sdk";

    let storeImgRadio = 2.25;

    let gps = {
      lat : 10,
      lng : 10
    }

    export default{
        name : "storeList",
        data(){
            return{
                imgList : [],
                storeList :[],
                isEnd : false,
                locationMessage : "获取位置中...",
                isLoadingLocation : true

            }
        },
        computed : {
           storeImgStyle : function(){
             return Util.Location.ratioElementForWindow(storeImgRadio);
          }
        },
        methods : {

            refresh : function(){
               this.loadStoreList();
            },

            forwardDetail : function(e,store){
              window.getRouter().push({path : `/store/detail/${store.storeId}`});
            },

            //查询门店列表
            loadStoreList : function(){
               API.biz.getStoreList(this.gps,{hasLoading : true})
                .then((res)=>{
                    this.$refs.loadLayer.onTopLoaded();
                    this.storeList = res.bizData;
                });
            },

            getLocation : function(){
                  console.log("location...");
                 if(!this.isLoadingLocation){
                    this.isLoadingLocation = true;
                    this.locationMessage = "获取位置中...";
                 }
                 Util.WX.getLocation()
                        .then((res)=>{
                            this.gps = {
                               lat : res.longitude,
                               lng : res.latitude
                            };

                            //逆定理编码
                            API.wx.geocodeByRegeo(this.gps)
                              .then(res=>{
                                  res = JSON.parse(res);
                                  console.log('高德',res);
                                  if(res.infocode == '10000'){
                                    this.locationMessage = res.regeocode.addressComponent.township;
                                  }
                                  else{
                                    Util.UI.toast(res.info);
                                  }
                                  this.isLoadingLocation = false;
                              });

                            this.loadStoreList();
                        },(err)=>{
                              this.locationMessage = err.desc+"，点击重新获取位置";
                              this.isLoadingLocation = false;
                              this.loadStoreList();
                        });
            }
        },
        mounted : function(){

            this.gps = {
                lat : 0,
                lng : 0
            };

            //加载banner
            API.biz.getBannerListByType("STORE_PAGE")
              .then((res)=>{
                  this.imgList = res.bizData.map((banner)=>{
                      banner.url = banner.picUrl;
                      banner.link = banner.pageUrl;
                      return banner;
                  });
              });



            if(!window.isInWx){
               this.loadStoreList();
            }

            //获得经纬度
            wx.ready(()=>{
              this.getLocation();
            });


        },
        components:{
            Banner,
            Location
        }
    }


</script>
